<template>
  <div>
    <!-- 弹出窗 -->

    <el-dialog
      title="角色编辑"
      :visible.sync="obj.isShow"
      width="30%"
    >
      <!-- 中间表单 -->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="手机号" prop="phone">
    <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="昵称" prop="nickname">
    <el-input type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input  type="password" v-model="ruleForm.password"></el-input>
  </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="2"></el-switch>
    </el-form-item>
</el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" v-if="obj.isAdd"
          >添 加</el-button
        >
        <el-button type="primary" @click="edit()" v-else>编 辑</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { memberinfo, memberedit } from "../../../request/api.js";
import { sucessAlert, warningAlert } from "../../../utils/alert.js";

export default {
  props: ["obj"],
  components: {},
  data() {
    return {
     ruleForm: {
        phone: "",
        nickname: "",
        password:"",
        status: 1,
      },
      rules:{
           phone:[
             {required:true,message:'请输入您的手机号',trigger:'change'},
             { min:11,max:11,message:'请输入11位手机号',trigger:'change'},
              { pattern:/^1[3|5|7|8|9]\d{9}$/,message:'请输入正确手机号格式', trigger:'change'
              }
           ]
      },
     

      defaultProps: {
        children: "children",
        label: "title",
      }
    }
    },
  computed: {
    ...mapGetters({
    }),
  },
  methods: {
    ...mapActions({
       asyncMemberList:"member/asynclist"
    }),
    //清空表单
    emty() {
      this.ruleForm={
        phone: "",
        nickname: "",
        password:"",
        status: 1,
      }
    },
    //取消功能
    cancel() {
      (this.obj.isShow = false), 
      this.emty();
    },
    getOne(uid) {
      memberinfo({ uid: uid }).then((res) => {
        this.ruleForm = res.data.list;
        this.ruleForm.uid = uid;
      });
    },
    edit() {
      memberedit(this.form).then((res) => {
        if (res.data.code == 200) {
          // 成功的提示
          sucessAlert(res.data.msg);
          // 关闭遮罩层并清空form
          this.cancel();
          // 刷新列表
          this.asyncMemberList();
        } else {
          // 失败的提示
          warningAlert(res.data.msg);
        }
      });
    },
  },
  mounted() {
    
  },
};
</script>
<style scoped>
</style>